{% load staticfiles %}
{% load custom_tags %}
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/font-awesome/css/font-awesome.min.css' %}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/Ionicons/css/ionicons.min.css' %}">

    {% block head %}

    {% endblock %}

    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'AdminLTE/dist/css/AdminLTE.min.css' %}">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" href="{% static 'AdminLTE/dist/css/skins/_all-skins.min.css' %}">
    <!-- Pace style -->
    <link rel="stylesheet" href="{% static 'AdminLTE/plugins/pace/pace.min.css' %}">

    <style>
        @media screen and (max-width: 991px){
            .navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
                right: 0;
            }
        }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="{% static 'js/html5shiv.min.js' %}"></script>
    <script src="{% static 'js/respond.min.js' %}"></script>
    <![endif]-->

    <!-- Google Font -->
    <!--link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"-->
    <link rel="stylesheet"
          href="{% static 'css/googleapis.css' %}">
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">
        <a href="javascript:void(0)" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>D2</b></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>D2FORM</b></span>
        </a>
        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header" style="font-size: 15px; color: #abb5b9;">首页</li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            {% block breadcrumb %}
                <ol class="breadcrumb">
                    <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i> 仪表盘</a></li>
                </ol>
            {% endblock %}
        </section>

        <!-- Main content -->
        <section class="content container-fluid">
            {% block content %}

            {% endblock %}
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 1.0.0
        </div>
        <!-- Default to the left -->
        <strong>Copyright &copy; 2018 <a href="#">Company</a>.</strong> All rights reserved.
    </footer>

    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>

    <!-- Loading-image -->
    <div id="loading-image"
         style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1050;display: none;overflow: hidden;background: rgba(0,0,0,0.3);">
        <img src="{% static 'spinner.svg' %}" style="position: relative; top: 40%; left: 50%">
    </div>

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="{% static 'AdminLTE/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- PACE -->
<script src="{% static 'AdminLTE/bower_components/PACE/pace.min.js' %}"></script>

{% block js %}

{% endblock %}

<!-- SlimScroll -->
<script src="{% static 'AdminLTE/bower_components/jquery-slimscroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'AdminLTE/bower_components/fastclick/lib/fastclick.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'AdminLTE/dist/js/adminlte.min.js' %}"></script>

<script>
    $(document).ajaxSend(function (event, request, url) {
        if (!(url.type in ['GET', 'get'])) {
            request.setRequestHeader('X-CSRFToken', '{{ csrf_token }}')
        }
    });

    $(document).ajaxComplete(function () {
        $('#loading-image').hide();
    });

    <!-- 固定标签 -->
    let pathname = window.location.pathname;

    $("li a").each(function () {
        let href = $(this).attr("href");
        if (pathname === href) {
            $(this).parents("ul").parent("li").addClass("active");
            $(this).parent("li").addClass("active");
        }
    });

    <!-- 生成面包屑和h1标题，并取消固定界面的面包屑 -->
    $(".treeview-menu li a").each(function () {
        if (pathname === '/') {
            $('.content-header h1').text('仪表盘');
            $('.content-header ol').remove();
        } else if (hide_header()) {
            $('.content-header ol').remove();
        } else {
            let href = $(this).attr("href");
            if (pathname === href) {
                let current_name = $(this).text();
                let pre_name = $(this).parent('li').parent('ul').prev('a').text();
                $('.content-header h1').text(current_name);
                $('.content-header ol li:eq(1)').text(pre_name);
                $('.content-header ol li:last').text(current_name);
            }
        }
    });

    function hide_header() {
        let paths = [];
        for (let item of paths) {
            if (pathname.indexOf(item) !== -1) {
                return true
            }
        }
    }
</script>

</body>
</html>